<template>
    <div class="v-bottom-two" v-if="bottomTwoShow">
      <div class="sectionBtnsBox" v-show="handleBottomBox.tool.flag">
        <div class="itemBtn" :class="{active: handleBottomBtn.annotation}" @click="$emit('toolFn', 'annotation')">
          <i class="amsp el-amsp-biaozhu"></i><span class="vbt-name">标注</span>
        </div>
        <div class="itemBtn" :class="{active: handleBottomBtn.measureLong}" @click="$emit('toolFn', 'measureLong')">
          <i class="amsp el-amsp-gudingchangduhuizhixian"></i><span class="vbt-name">测长度</span>
        </div>

        <div class="itemBtn" :class="{active: handleBottomBtn.measureAngle}" @click="$emit('toolFn', 'measureAngle')">
          <i class="amsp el-amsp-jiaodu"></i><span class="vbt-name">角度</span>
        </div>

        <div class="itemBtn" :class="{active: handleBottomBtn.hiddenMeasure}" @click="$emit('toolFn', 'hiddenMeasure')">
          <i class="amsp" :class="handleBottomBtn.hiddenMeasure?'el-amsp-keshi1':'el-amsp-bukeshi'"></i>
          <span class="vbt-name">{{handleBottomBtn.hiddenMeasure?'显示':'隐藏'}}</span>
        </div>
      </div>

      <div class="sectionBtnsBox" v-show="handleBottomBox.sixView.flag">
        <div class="itemBtn" :class="{active:handleBottomBtn.activeSixViewIndex ===1}" @click="$emit('sixView', 1)">
          <i class="amsp el-amsp-shituzhushitu"></i><span class="vbt-name">正视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBtn.activeSixViewIndex ===2}" @click="$emit('sixView', 2)">
          <i class="amsp el-amsp-shituhoushitu"></i><span class="vbt-name">后视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBtn.activeSixViewIndex ===3}" @click="$emit('sixView', 3)">
          <i class="amsp el-amsp-shituzuoshitu"></i><span class="vbt-name">左视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBtn.activeSixViewIndex ===4}" @click="$emit('sixView', 4)">
          <i class="amsp el-amsp-shituyoushitu"></i><span class="vbt-name">右视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBtn.activeSixViewIndex ===5}" @click="$emit('sixView', 5)">
          <i class="amsp el-amsp-shitufushitu"></i><span class="vbt-name">俯视图</span>
        </div>
        <div class="itemBtn" :class="{active:handleBottomBtn.activeSixViewIndex ===6}" @click="$emit('sixView', 6)">
          <i class="amsp el-amsp-shituyangshitu"></i><span class="vbt-name">仰视图</span>
        </div>
      </div>

      <div class="sectionBox" v-show="handleBottomBox.sectionFrom.flag">
        <div class="iptBox">
          <div class="name">X</div>
          <el-slider class="ipt" :show-tooltip="false" range v-model="handleBottomBox.sectionFrom.x"
              @input="$parent.setPlane(0, 3, handleBottomBox.sectionFrom.xRange[0], $event)"
             :min="handleBottomBox.sectionFrom.xRange[0]"
             :max="handleBottomBox.sectionFrom.xRange[1]"></el-slider>
          <!-- <el-slider class="ipt" :show-tooltip="false" v-model="handleBottomBox.sectionFrom.x"
              @input="$parent.setPlane(0, $event)"
             :max="handleBottomBox.sectionFrom.maxX"
             :min="handleBottomBox.sectionFrom.minX"></el-slider>
          <el-slider class="ipt" :show-tooltip="false" v-model="handleBottomBox.sectionFrom._x" style="margin-left: 15px;"
              @input="$parent.setPlane(3, $event)"
             :max="handleBottomBox.sectionFrom._maxX"
             :min="handleBottomBox.sectionFrom._minX"></el-slider> -->
          <!-- <div class="btns">
              <i class="amsp el-amsp-a-24_nor-copy"
              :class="{act: handleBottomBox.sectionFrom.typeX}"
              @click="handleBottomBox.sectionFrom.typeX = true"></i>
              <i class="amsp el-amsp-a-24_nor"
              :class="{act: !handleBottomBox.sectionFrom.typeX}"
              @click="handleBottomBox.sectionFrom.typeX = false"></i>
          </div> -->
        </div>
        <div class="iptBox">
          <div class="name">Y</div>
          <el-slider class="ipt" :show-tooltip="false" range v-model="handleBottomBox.sectionFrom.y"
              @input="$parent.setPlane(1, 4, handleBottomBox.sectionFrom.yRange[0], $event)"
             :min="handleBottomBox.sectionFrom.yRange[0]"
             :max="handleBottomBox.sectionFrom.yRange[1]"></el-slider>
          <!-- <el-slider class="ipt" :show-tooltip="false" v-model="handleBottomBox.sectionFrom.y"
              @input="$parent.setPlane(1, $event)"
             :max="handleBottomBox.sectionFrom.maxY"
             :min="handleBottomBox.sectionFrom.minY"></el-slider>
          <el-slider class="ipt" :show-tooltip="false" v-model="handleBottomBox.sectionFrom._y" style="margin-left: 15px;"
              @input="$parent.setPlane(4, $event)"
             :max="handleBottomBox.sectionFrom._maxY"
             :min="handleBottomBox.sectionFrom._minY"></el-slider> -->
          <!-- <div class="btns">
              <i class="amsp el-amsp-a-24_nor-copy"
              :class="{act: handleBottomBox.sectionFrom.typeY}"
              @click="handleBottomBox.sectionFrom.typeY = true"></i>
              <i class="amsp el-amsp-a-24_nor"
              :class="{act: !handleBottomBox.sectionFrom.typeY}"
              @click="handleBottomBox.sectionFrom.typeY = false"></i>
          </div> -->
        </div>
        <div class="iptBox">
          <div class="name">Z</div>
          <el-slider class="ipt" :show-tooltip="false" range v-model="handleBottomBox.sectionFrom.z"
              @input="$parent.setPlane(2, 5, handleBottomBox.sectionFrom.zRange[0], $event)"
             :min="handleBottomBox.sectionFrom.zRange[0]"
             :max="handleBottomBox.sectionFrom.zRange[1]"></el-slider>
          <!-- <el-slider class="ipt" :show-tooltip="false" v-model="handleBottomBox.sectionFrom.z"
              @input="$parent.setPlane(2, $event)"
             :max="handleBottomBox.sectionFrom.maxZ"
             :min="handleBottomBox.sectionFrom.minZ"></el-slider>
          <el-slider class="ipt" :show-tooltip="false" v-model="handleBottomBox.sectionFrom._z" style="margin-left: 15px;"
              @input="$parent.setPlane(5, $event)"
             :max="handleBottomBox.sectionFrom._maxZ"
             :min="handleBottomBox.sectionFrom._minZ"></el-slider> -->
          <!-- <div class="btns">
              <i class="amsp el-amsp-a-24_nor-copy"
              :class="{act: handleBottomBox.sectionFrom.typeZ}"
              @click="handleBottomBox.sectionFrom.typeZ = true"></i>
              <i class="amsp el-amsp-a-24_nor"
              :class="{act: !handleBottomBox.sectionFrom.typeZ}"
              @click="handleBottomBox.sectionFrom.typeZ = false"></i>
          </div> -->
        </div>
      </div>
      <div class="colorBox" v-show="handleBottomBox.colorFrom.flag">
        <div class="iptBox">
          <div class="name">颜色</div>
          <!-- <input type="color" v-model="handleBottomBox.colorFrom.color" @input="setColor" @blur="onBlur"/> -->
          <div class="colorBox">
            <span class="clr" v-for="(a,b) in handleBottomBox.colorFrom.colors" :style="{backgroundColor: a}" @click="$parent.setColor(a)"></span>
          </div>
        </div>
      </div>
      <div class="alphaBox" v-show="handleBottomBox.alphaFrom.flag">
        <div class="iptBox">
          <div class="name">透明度</div>
          <el-slider class="ipt" :show-tooltip="false" :step="10" v-model="handleBottomBox.alphaFrom.opacity" @input="$parent.setAlpha"></el-slider>
        </div>
      </div>
    </div>
</template>

<script>
  
export default {
  components: {
  },
  props: ['handleBottomBox', 'handleBottomBtn',],
  data() {
    return {
    }
  },
  computed: {
    bottomTwoShow () {
      let flag = false
      for (let a in this.handleBottomBox) {
        if (this.handleBottomBox[a].flag) { flag = true }
      }
      return flag
    },
  },
  created() {},
  mounted() {},

  methods:{

  }
}
</script>
<style scoped lang="less">
</style>